<template>
    <n-space v-if="visible" v-bind="mergedProps">
        <m-button v-for="item in items" v-bind="item" />
    </n-space>
</template>

<script setup lang="ts">
import type { ButtonGroupProps } from "./types"
import { MButton } from "@/components/Button"
import { hasPermission, isVisible } from "@/components/hooks"
import { isEmpty, isUndefined } from "@/utils"

const props = withDefaults(defineProps<ButtonGroupProps>(), {})

const attrs = useAttrs()

const convertProps = computed(() => {
    const result = {}

    return result
})

const mergedProps = computed(() => ({
    ...attrs,
    ...unref(convertProps)
}))

const items = computed(() => {
    const { items = [], size, data } = props
    return items
        .filter(v => isVisible(v, true, data) && hasPermission(v))
        .map(v => {
            const p = { ...v }
            isUndefined(v.data) && (p.data = data)
            isUndefined(v.size) && (p.size = size)
            p.permissions = undefined
            p.visible = undefined
            return p
        })
})

const visible = computed(() => !isEmpty(unref(items)))
</script>
